<template>
  <div class="warring_list">
    <div class="warning_content">
      <div
        v-for="item in alarmDetail"
        :key="item.id"
        class="box_option"
        @click="openWarning(item)"
      >
        <div class="box_name">
          {{ item.alarmName }}
          <div class="box_status">
            <el-tag
              effect="plain"
              size="mini"
              :type="item.solveStatus == 0 ? 'danger' : 'success'"
              :class="item.solveStatus == 0 ? 'danger' : 'success'"
            >{{ typeText[item.solveStatus] }}</el-tag>
            <el-tag
              effect="plain"
              size="mini"
              :type="
                item.confirmRemark === '未确认' ? 'danger' : item.confirmRemark === '确认超时' ? 'warning' : 'success'
              "
              :class="
                item.confirmRemark === '未确认' ? 'danger' : item.confirmRemark === '确认超时' ? 'warning' : 'success'
              "
            >{{ item.confirmRemark }}</el-tag>
          </div>
        </div>
        <div class="box_option_content">
          <div>
            <i class="el-icon-s-tools" />
            {{ item.deviceName }}
          </div>
          <i class="el-icon-map-location" />
          <span>{{ item.deviceAddress }}</span>
          <div>
            <i class=" el-icon-time" />
            <span>{{ item.alertTime }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div v-if="isWarning"> -->

    <!-- </div> -->

    <!-- <alarmInfo ref="alarmInfo"></alarmInfo>
    <cockpit v-if="isVisible"
             ref="cockpit"
             :system-map-data="alarmDetail[0]"
             @close="getPoliceList"
    ></cockpit>
    <alarmView ref="alarmView" /> -->
  </div>
</template>
<script>

// import vueSeamlessScroll from 'vue-seamless-scroll'
// import cockpit from '@/components/alarmInfo/cockpit'
// import alarmInfo from '@/components/alarmInfo/index'
// import alarmView from '../../dashboard/alarmView.vue'
export default {
  components: {
    // warningInfo
    //   // vueSeamlessScroll,
    //   cockpit,
    //   alarmInfo,
    //   alarmView
  },
  props: {
    newDate: {
      type: Date,
      default: Date
    }
  },
  data() {
    return {
      alarmDetail: [
        { solveStatus: 0, confirmRemark: '未确认', deviceName: '温感00101001', deviceAddress: '高新处理中心楼/负一层/车库温感00101001', alertTime: '2021-10-21 6:14:08' },
        { solveStatus: 1, confirmRemark: '确认超时', deviceName: '温感00101001', deviceAddress: '高新处理中心楼/负一层/车库温感00101001', alertTime: '2021-10-22 7:24:08' },
        { solveStatus: 1, confirmRemark: '未确认', deviceName: '温感00101001', deviceAddress: '高新处理中心楼/负一层/车库温感00101001', alertTime: '2021-10-23 8:34:08' },
        { solveStatus: 0, confirmRemark: '确认超时', deviceName: '温感00101001', deviceAddress: '高新处理中心楼/负一层/车库温感00101001', alertTime: '2021-10-24 9:44:08' },
        { solveStatus: 1, confirmRemark: '已确认', deviceName: '温感00101001', deviceAddress: '高新处理中心楼/负一层/车库温感00101001', alertTime: '2021-10-25 10:04:08' },
        { solveStatus: 0, confirmRemark: '已确认', deviceName: '温感00101001', deviceAddress: '高新处理中心楼/负一层/车库温感00101001', alertTime: '2021-10-28 11:14:08' }
      ],
      isVisible: false,
      typeText: { 0: '待处理', 1: '已处理' },
      warningNewDate: null,
      warningData: null,
      isWarning: false
    }
  },
  watch: {
    newDate() {
      this.getPoliceList()
    }
  },
  created() {
    // this.getPoliceList()
    // setInterval(() => {
    //   this.getPoliceList()
    // }, 30000)
  },
  methods: {
    getPoliceList() {
      this.$get('console/api/v1/cockpit/alarms').then(r => {
        // this.policeList = r.data.data
        this.alarmDetail = r.data.data.alarmDetail
        this.$emit('alaemDetail', this.alarmDetail)
        this.isVisible = false
      })
    },
    openWarning(item) {
      this.isWarning = true
      this.warningData = item
      this.warningNewDate = new Date()
      // this.$emit('openWarning', item)
      // if (item.solveStatus == 1) {
      //   this.$refs['alarmView'].visible = true
      //   this.$refs['alarmView'].init(item)
      // } else {
      //   item.isClick = true
      //   item['date'] = new Date().toTimeString()
      //   // this.$store.commit('cim/setWarningMessage', item)
      //   this.$store.commit('cim/setSystemMsg', item)
      //   this.$refs['alarmInfo'].visible = true
      // }
      // this.isVisible = true
    },
    closeWarning() {
      debugger
      this.isWarning = false
      this.warningData = null
    }
  }
}
</script>
<style lang="scss" scoped>
.warring_list {
  width: 100%;
  height: 100%;
}
.warning_content {
  overflow: auto;
  width: 100%;
  height: 100%;
}
.warning_content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 50x;
}

.warning_content::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #0250b7;
}

.warning_content::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #11214a;
  border-radius: 10px;
}
.box_option {
  color: #fff;
  padding: 10px 10px;
  margin: 3px 0;
  line-height: 1.8;
  cursor: pointer;
}
.box_option_content {
  padding-left: 10px;
}
.box_name {
  font-size: 18px;
  color: #cae3fa;
  display: flex;
}
.box_status {
  margin-left: 10px;
  span {
    background-color: #fff0 !important;
  }
}
.warring_list .box_option:nth-child(odd) {
  background: #3195fb2b;
}
</style>
